<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- computed计算可以将被被改变的数据 -->
    <div id="demo">
        姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
        名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
        姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName"><br>
        姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
        姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

        <p>我的信息是:{{info}}</p>
    </div>
    <script src="../day02/js/vue.js"></script>
    <script>
        new Vue({
            data:{
                firstName:"A",
                lastName:"B",
                fullName2:'',
                info:'',
            },
            //使用watch来监视
            watch: {
                /* firstName(value){
                    this.fullName2 = value + '-' + this.lastName;
                    // 模拟异步请求
                    setTimeout(()=>{
                        const info = `我的姓名是${this.firstName}${this.lastName}以及其他信息`
                        // 更新信息
                        this.info = info;
                    },1000)
                } */

                firstName:{
                    handler(value){
                        // 更新fullname2
                        this.fullName2 = value + '-' + this.lastName;
                        // 模拟异步代码请求的到用户信息
                        setTimeout(()=>{
                            const info = `我的信息为${this.firstName} ${this.lastName}以及其他信息`
                            // 更新信息
                            this.info = info;
                        },1000)
                    },
                    immediate:true,//初始时就会执行一次
                }
            },
            computed:{
                // 第一种方法简写了getter
                /* fullName:{
                    get(){
                        return this.firstName + '-' + this.lastName;
                    }
                } */
                fullName(){
                    return this.firstName + '-' + this.lastName;
                }, 
                // 第二种书写方式,实现数据的双向绑定
                fullName3:{
                    get(){
                        return this.firstName + '-' + this.lastName;
                    }, 
                    // 监听的fullName3的变化,set是在属性发生变化后才调用的
                    set(value){
                        const names = value.split("-");
                        this.firstName = names[0];
                        this.lastName = names[1];
                    }
                }
            }
        }).$mount("#demo")
    </script>
</body>
</html>